import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

class TextPage extends PageWithTitle {
  const TextPage({super.key}) : super("文本(Text、RichText)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("ui开发中，常见组成元素之一就是文本，类似Android TextView，Flutter也有文本"
          "类的组件用于显示文本内容"),
      AppSpacer.large,
      UlItem("Text"),
      BodyText("文本组件，用于显示文本，通过内部封装RichText组件实现，所以它也支持富文本，组"
          "件构造提供了大量参数用于设置文本样式"),
      _Example(),
      AppSpacer.large,
      UlItem("RichText"),
      BodyText("富文本组件，一般不会直接用这个，而是使用Text.rich来构建富文本组件"),
      AppSpacer.large,
      UlItem("Material DefaultTextStyle AnimatedDefaultTextStyle"),
      BodyText("这三者都可以覆盖局部的默认文本样式，但一般应该用不上"),
    ];
  }
}

class _Example extends StatelessWidget {
  const _Example();

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        AppSpacer.large,
        const PrimaryHeaderLabelText("style", "文本样式"),
        const Text("默认"),
        DefaultTextStyle(
          style: Theme.of(context)
              .textTheme
              .bodyMedium!
              .copyWith(color: Theme.of(context).colorScheme.primary),
          child: const Text("局部覆盖默认样式"),
        ),
        const LabelText("     - 不配置 采用默认文本样式，这通常来自他上层的DefaultTextStyle组件"
            "，页面组件Scaffold通过Material构建，内部使用AnimatedDefaultTextStyle并指定"
            "为Theme.of(context).textTheme.bodyMedium，所以要修改默认文本样式的正确做法"
            "是修改主题中bodyMedium的样式配置。\n因此我们如果是想影响一块组件树的默认文本样式，"
            "可以通过在其外部包裹一层Material或DefautTextStyle来修改局部的默认文本样式。"),
        Text(
          "headlineLarge",
          style: Theme.of(context).textTheme.headlineLarge,
        ),
        Text(
          "headlineMedium",
          style: Theme.of(context).textTheme.headlineMedium,
        ),
        Text(
          "headlineSmall",
          style: Theme.of(context).textTheme.headlineSmall,
        ),
        Text(
          "titleLarge",
          style: Theme.of(context).textTheme.titleLarge,
        ),
        Text(
          "titleMedium",
          style: Theme.of(context).textTheme.titleMedium,
        ),
        Text(
          "titleSmall",
          style: Theme.of(context).textTheme.titleSmall,
        ),
        Text(
          "bodyLarge",
          style: Theme.of(context).textTheme.bodyLarge,
        ),
        Text(
          "bodyMedium",
          style: Theme.of(context).textTheme.bodyMedium,
        ),
        Text(
          "bodySmall",
          style: Theme.of(context).textTheme.bodySmall,
        ),
        Text(
          "labelLarge",
          style: Theme.of(context).textTheme.labelLarge,
        ),
        Text(
          "labelMedium",
          style: Theme.of(context).textTheme.labelMedium,
        ),
        Text(
          "labelSmall",
          style: Theme.of(context).textTheme.labelSmall,
        ),
        const LabelText("     - 使用主题样式 这是我们统一App样式配置的常见方式，根据使用场景从"
            "Theme.of(context).textTheme选择对应样式来修改样式，这样可以做到通过主题全局"
            "配置样式，当然根据实际情况也可以通过拷贝来稍作修改"),
        Text(
          "自定义",
          style: TextStyle(
            backgroundColor: Theme.of(context).colorScheme.surfaceContainer,
            color: Theme.of(context).colorScheme.onSurface,
            fontSize: 20,
            fontWeight: FontWeight.w900,
            letterSpacing: 10,
          ),
        ),
        const LabelText("     - 自定义，这种一般用于特殊场景，比如整个APP里面设计师在这里弄"
            "了个非常特殊的样式，与应用的整体风格无关，那么直接自定义样式来实现，具体根据需求修"
            "改样式参数"),
        AppSpacer.large,
        const PrimaryHeaderLabelText(
          "overflow",
          "决定文本溢出的处理方式，比如直接裁剪或者用省略号代替",
        ),
        const SizedBox(
          width: 120,
          child: Text(
            "溢出文本123456789",
            overflow: TextOverflow.ellipsis,
          ),
        ),
        AppSpacer.large,
        const PrimaryHeaderLabelText("maxLines","限制最大行数"),
        AppSpacer.large,
        const PrimaryHeaderLabelText("Text.rich","构造富文本样式，可以看成是不同样式的Text或其它组件用"
            "Wrap构成的富文本排布"),
        Text.rich(
          TextSpan(
            text: "TextSpan",
            style: TextStyle(color: Theme.of(context).colorScheme.primary),
            children: [
              TextSpan(
                text: " 文本块，每一块文本都可以单独指定样式，若不指定则会跟随其上层的"
                    "TextSpan文本样式，这为快速配置富文本提供了便捷",
                style: Theme.of(context).textTheme.labelMedium,
              ),
            ],
          ),
        ),
        Text.rich(
          TextSpan(
            text: "WidgetSpan",
            style: TextStyle(color: Theme.of(context).colorScheme.primary),
            children: [
              TextSpan(
                text: " 组件块，显然我们也可以在富文本中插入一些组件作为区块，一般是小图标",
                style: Theme.of(context).textTheme.labelMedium,
              ),
              const WidgetSpan(child: Icon(Icons.ten_k)),
              TextSpan(
                text: "、链接",
                style: Theme.of(context).textTheme.labelMedium,
              ),
              const WidgetSpan(child: UrlLink("百度", "https://www.baidu.com")),
            ],
          ),
        ),
      ],
    );
  }
}
